<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-button
					text="基础使用"
					theme="primary"
					@onClick="showBasicUse = true"
					block
				></pure-button>
				<pure-overlay
					:show="showBasicUse"
					@onClick="showBasicUse = false"
				></pure-overlay>
			</pj-demo>

			<!-- 嵌入内容 -->
			<pj-demo title="嵌入内容">
				<pure-button
					text="嵌入内容"
					theme="success"
					@onClick="showContent = true"
					block
				></pure-button>
				<pure-overlay
					:show="showContent"
					@onClick="showContent = false"
				>
					<view
						class="content"
						@tap.stop
						>内容</view
					>
				</pure-overlay>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	const status = ref("");
	const showBasicUse = ref(false);
	const showContent = ref(false);
</script>

<!-- 自定义动画不要放到 scoped 中，因为编译后名称会变，导致不生效 -->
<style lang="scss" scoped>
	.content {
		width: 100px;
		height: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: var(--pure-background-default);
		border-radius: var(--pure-radius-default);
		animation-timing-function: ease-in-out;
		animation-duration: 500ms;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
</style>
